<template>
  <a-card class='file-item-view' :bordered='false'>
    <div class='image-view'>
      <img v-if="item.type == '1'" class='image-item' :src='item.url' />
      <img v-if="item.type == '2'" class='image-item' :src="`${item.url}?x-oss-process=video/snapshot,t_0,f_jpg`" />
      <img v-if="item.type == '3'" class='image-item' src="@/assets/mp3.png" />
      <img v-if="item.type == '1'" src='@/assets/pic.png' class='tag-image'>
      <img v-else-if="item.type == '2'" src='@/assets/video.png' class='tag-image'>
      <img v-else-if="item.type == '3'" src='@/assets/radio.png' class='tag-image'>
      <div class='preview' @click='onPreview'>
        <img v-if="item.type == 1" src='@/assets/pic.png' class='preview-image'>
        <img v-else-if="item.type == 2" src='@/assets/video.png' class='preview-image'>
        <img v-else-if="item.type == 3" src='@/assets/radio.png' class='preview-image'>
        <span>预览</span>
      </div>
    </div>
    <a-checkbox v-if='isCheckbox' class='checkbox-view' :disabled='disabled' :value='item.id'>{{ item.name }}</a-checkbox>
    <div>
      <a-button type='text' style='color: #40a9ff' @click='isFileNameModal = true'>改名</a-button>
      <a-button type='text' style='color: #40a9ff' @click="showInfo(item.url)">链接</a-button>
      <a-button type='text' danger @click='onDelete'>删除</a-button>
    </div>
    <a-modal v-model:visible='isVideoModal' title='视频预览' width='100%' wrap-class-name='full-modal'>
      <video class='video-item' controls='controls' autoplay='autoplay' loop='loop' v-if='isVideoModal' :src='item.url'></video>
    </a-modal>

    <a-modal v-model:visible='isAudioModal' title='音频预览' wrap-class-name='audio-modal'>
      <audio :src='item.url' loop='loop' controls='controls' autoplay='autoplay' v-if='isAudioModal'></audio>
    </a-modal>

    <a-modal v-model:visible="isFileNameModal" title="提示" centered @ok="onUpDataName">
      <a-form :model="item" layout='vertical'>
        <a-form-item label="素材名称" :rules="[{ required: true, message: '请输入素材名称' }]">
          <a-input v-model:value="fileName" placeholder="请输入素材名称" />
        </a-form-item>
      </a-form>
    </a-modal>
    <div class="preview-image">
      <a-image :preview='{visible, onVisibleChange: setVisible}' :src='item.url' v-if="item.type == '1'"/>
    </div>
  </a-card>
</template>

<script>
import { defineComponent, ref, createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { materialApi } from '@/api/materialApi';
export default defineComponent({
  name: 'FileItem',
  props: {  //指定接收的值，必须指定类型
    item: Object,
    isCheckbox: Boolean,
    disabled: Boolean
  },
  setup(props, { emit }) {
    const isUpDataName = ref(false);
    const fileName = ref(props.item.name);
    const visible = ref(false);
    const isVideoModal = ref(false);
    const isAudioModal = ref(false);
    const isFileNameModal = ref(false);

    function onUpDataName() {
      emit('update:name', fileName.value);
      isFileNameModal.value = false
      materialApi.edit({
        id: props.item.id,
        name: fileName.value
      })
      Modal.success({ title: '提示', content: '操作成功!' });
    }

    function onDelete() {
      Modal.confirm({
        title: '提醒',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定删除吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          emit('delete', props.item);
          materialApi.del({
            id: props.item.id
          })
        }
      });
    }

    function setVisible(value) {
      visible.value = value;
    }

    function onPreview() {
      if (props.item.type == '1') return visible.value = true;
      if (props.item.type == '2') return isVideoModal.value = true;
      isAudioModal.value = true;
    }

    function showInfo(content) {
      Modal.info({content: content });
    }

    return {
      props,
      visible,
      onUpDataName,
      setVisible,
      isUpDataName,
      fileName,
      isVideoModal,
      isAudioModal,
      isFileNameModal,
      onPreview,
      onDelete,
      showInfo
    };
  }
});
</script>
<style lang='less'>
.audio-modal {
  .ant-modal-content {
    .ant-modal-footer {
      display: none;
    }
  }
}

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    background: transparent;

    .ant-modal-footer {
      display: none;
    }
  }

  .ant-modal-body {
    .video-item {
      width: 100%;
      height: calc(100vh - 200px);
    }
  }
}
</style>
<style scoped lang='less'>
.file-item-view {
  width: 100%;
  box-shadow: 0px 2px 10px 0px rgba(103, 103, 103, 0.1);
  border-radius: 8px;
  position: relative;

  /deep/ .ant-card-body {
    padding: 10px !important;
    position: relative;
    .preview-image{
      position: absolute;
      display: none;
      z-index: -1;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
    }
  }

  .image-view {
    width: 100%;
    height: 200px;
    position: relative;

    &:hover {
      .preview {
        display: flex;
        cursor: pointer;
      }
    }
    .preview {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2;
      display: none;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .preview-image {
      width: 25px;
      margin-right: 10px;
    }

    .tag-image {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 15px;
    }

    .image-item {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /deep/ .checkbox-view {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 10px auto;

  }

  /deep/.checkbox-view > span:nth-child(2) {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 2px;
  }

  .file-name{
    flex: 1;
    margin: 10px auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}


</style>
